<!DOCTYPE html>
<html>

{% set theme =  getThemeProperties() %}
{% set css = 'join' %}
{% if app.request.cookies.get('DARK_MODE') is defined and app.request.cookies.get('DARK_MODE') == 1 %}
    {% set css = 'joinBlack' %}
{% endif %}
{% include'base/__head.html.twig' with {'css': css} %}

{% set image = pexelsImage() %}

<body
        class="{% if app.request.cookies.get('DARK_MODE') is defined and app.request.cookies.get('DARK_MODE') == 1 %}
    blackMode{% endif %} joinPage">
<style>
    {% if server
    is defined and
    server is not null and
    (
    ( server.showStaticBackgroundColor and
    server.staticBackgroundColor is not null ) or
    ( server.serverBackgroundImage is not null )
    )
    %}

    {% if server.serverBackgroundImage %}
    .imageBackground {
        background-image: url("{{ vich_uploader_asset(server.serverBackgroundImage,'documentFile') }}");
    }

    .blackMode .window {
        background-color: rgba(0, 0, 0, 0.6);
    }

    {%else%}
    .imageBackground {
        background-color: {{ server.staticBackgroundColor }};
    }

    {%endif%}


    {% elseif image is not null %}
    .imageBackground {
        background-image: url("{{ image['src']['original'] }}?auto=compress&cs=tinysrgb&w=1920");
    }

    .blackMode .window {
        background-color: rgba(0, 0, 0, 0.6);
    }

    {% endif %}


</style>


<div id="mainContent" class="wrapper">
    <div class="window" id="window">
        <div class="navigation fullwidth shadow-3">
            <div class="container d-flex justify-content-between align-items-center">
                <div id="logo_image">
                    <img class="d-none d-sm-block" src="
                    {% if server is defined and  server is not null and server.logoUrl is not null %}
                                {{ server.logoUrl }}
                        {% else %}
                            {% if theme == false %}
                                {{ asset('logo.png') }}
                            {% else %}
                                {{ theme.logo }}
                            {% endif %}

                        {% endif %}"
                         alt="Logo"
                         style="height: 50px; width: auto">


                </div>
                {% if theme != false %}
                    <p style="margin-bottom: 0; color:{{ theme.headerLineColor }}" class="d-none d-lg-block">
                        {{ theme.headerLine }}
                    </p>

                {% endif %}
                {{ include('join/__navbar.html.twig') }}
            </div>
        </div>

        <div class="main" id="main">
            <div class="imageBackground"></div>
            <div class="mainContent d-flex flex-column pb-0 justify-content-between">

                {% block container %}
                <div class="container mb-5">
                    {% endblock %}
                    {% block body %}{% endblock %}
                    <div class="row justify-content-center">
                        {% block mainRow %}
                        <div class="col-xl-8 col-lg-12">
                            {% endblock %}
                            <div class="card frozenGlas">
                                <div class="glossy"></div>
                                <div class="card-body">
                                    {% if room is defined and room is not null %}
                                        {% if room.tag is not null %}
                                            <h3 class="h3-responsive text-center w-100">
                                                <p class="badge badge-danger d-block" id="tagContent"
                                                   style="color: {{ room.tag.color }}; background-color: {{ room.tag.backgroundColor }}">{{ room.tag.title }}</p>
                                            </h3>
                                        {% endif %}
                                    {% endif %}
                                    <div class="row justify-content-center">
                                        <div class="{% if fullwidth is defined and fullwidth %}col-lg-12{% else %}col-lg-10 {% endif %}">
                                            <div class="row">
                                                <div class="col-12 d-flex justify-content-center mb-4">
                                                    <span class="joinPageHeader">{% block header %}{% endblock %}</span>
                                                </div>
                                                {% block content %}{% endblock %}
                                                <div class="col-12">
                                                    {% if server is not defined or not server %}
                                                        <p>
                                                            {% trans %}Wer eine datenschutzfreundliche Videokonferenz Plattform sucht die auf dem eigenen Server betrieben wird ist mit dem Open Source Tool Jitsi gut bedient. Jitsi ist eine Alternative zu Zoom. Sie speichert keine Nutzerdaten und ermöglicht die verschlüsselte Anwendung.{% endtrans %}
                                                        </p>
                                                    {% endif %}
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    {{ include('join/__frozenGlasContent.html.twig') }}
                                </div>


                            </div>
                            <div class="container-fluid">



                            </div>

                            {% if server is defined and server and server|roomsinFuture|length > 0 %}
                                {{ include('join/__publicRooms.html.twig') }}
                            {% endif %}

                        </div>

                    </div>
                </div>

                {% if theme == false or theme.joinPageFooter == true %}
                    {{ include('join/__footer.html.twig') }}
                {% endif %}
            </div>

        </div>
        <div class="footer z-depth-1">
            {{ include('base/__footer.html.twig') }}
        </div>

        {% block back %}{% endblock %}


        {{ include('base/__snack.html.twig') }}
    </div>
    {{ include('base/__matomoOptOut.html.twig') }}
</div>
<div class="modal fade" id="loadContentModal" data-mdb-backdrop="static" tabindex="-1" role="dialog"
     aria-labelledby="loadContentModal"
     aria-hidden="true">
</div>

{% if room is defined and room is not null %}

    {% include 'conference_end/__rating.html.twig' with {'room':room} %}

{% endif %}
<script>
    var confirmTitle = "{{ 'confirm.title'|trans }}";
    var confirmCancel = "{{ 'confirm.cancel'|trans }}";
    var confirmOk = "{{ 'confirm.ok'|trans }}";
    var setTileview = {{ JITSI_MEET_DEFAULT_TILE_VIEW }};
    var setParticipantsPane = {{ JITSI_MEET_DEFAULT_PARTICIPANTS_PANE }};
    var avatarUrl = '{% if app.user and app.user.profilePicture %}{{ vich_uploader_asset(app.user.profilePicture,'documentFile') }}{% endif %}';
    var websocketTopics = "{{ getJwtforWebsocket([],app.user) }}";
    var websocketUrl = "{{ getUrlforWebsocket() }}";
    var notificationUrl = "{{ laf_notificationUrl }}";
    {% if app.request is not null and app.request.cookies.get('DARK_MODE') =="" %}

    function getCookie(cname) {
        let name = cname + "=";
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        let expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    setCookie('DARK_MODE', {{ laf_darkmodeAsDefault }}, 700);
    location.reload();
    {% endif %}

</script>
{% block script %}
{% endblock %}
{% block webpack %}
    {{ encore_entry_script_tags('frontend') }}
{% endblock %}
{% block pageEnd %}{% endblock %}
</body>

</html>
